<template>
    <div class="provide">
        <div class='provide-box'>
            <div class="provide-title">
                <p :class="{animate:isShow,wo:isHidden}"><span>我们提供什么</span></p>
                <section :class="{animate2:isShow,wo:isHidden}">产品和服务</section>
            </div>
            <div class="provide-list clearfix" :class="{animate5:isShow,wo:isHidden}">
                <ul>
                    <li :class="{animate6:isShow,wo:isHidden}">
                    <div class="provide-list-box">
                        <div class="img-box">
                            <img src="../assets/images/niurou.jpg" alt="">  
                        </div> 
                        <div class="content-box">
                            <p><span>肉牛肉</span></p>
                            <section>我们优质的冷冻牛肉提供最温馨和美味的饮食体验。我们的牛肉不含任何人造成分。</section>
                            <a href="">阅读更多</a>
                        </div>
                    </div>
                    </li>
                    <li :class="{animate7:isShow,wo:isHidden}">
                    <div class="provide-list-box">
                        <div class="img-box">
                            <img src="../assets/images/fruit.jpg" alt="">
                        </div>
                        <div class="content-box">
                            <p><span>果园水果</span></p>
                            <section>我们有你的水果收藏，也许有一些你从来没有听说过！我们提供苹果，桃子，油桃，甜樱桃。</section>
                            <a href="">阅读更多</a>
                        </div>
                    </div>
                    </li>
                    <li :class="{animate8:isShow,wo:isHidden}">
                    <div class="provide-list-box">
                        <div class="img-box">
                        <img src="../assets/images/rzp.png" alt="">
                        </div>
                        <div class="content-box">
                            <p><span>乳制品</span></p>
                            <section>我们是一家著名的乳制品加工商，在市场上备受赞誉，新鲜度和纯度。</section>
                            <a href="">阅读更多</a>
                        </div>
                    </div>
                    </li>
                    <li :class="{animate9:isShow,wo:isHidden}">
                    <div class="provide-list-box">
                        <div class="img-box">
                            <img src="../assets/images/canyin.png" alt="">
                        </div>
                        <div class="content-box">
                            <p><span>餐饮</span></p>
                            <section>我们为商务会议和会议提供各种规模的农场新鲜，健康和美味的食物。</section>
                            <a href="">阅读更多</a>
                        </div>
                    </div>
                    </li>
                </ul>     
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                isShow:false,
                isHidden:true  
            }
        }, 
        mounted(){
            window.addEventListener('scroll',function(){ 
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
                if(scrollTop >= 1600){
                   this.isShow = true;
                   this.isHidden = false;
            }
        }.bind(this))
    }
}
</script>

<style  scoped>
p{font-size: 30px;margin:0;padding:0;}
li{list-style:none;}
section{font-size:14px;color: inherit;}

    .provide{
        background:#f9f8f6;
        color: rgb(51, 51, 51);
    }
    .provide-box{
        width:80%;
        margin:0 auto;
        padding-top:90px;
    }
    .provide-title{
        text-align:center;
    }
    .provide-list{
        margin:45px 0 0 90px;
    }
    .provide-list ul li{
        margin-bottom:50px;
        float:left;
        visibility: visible;
        animation-delay: 0s;
        animation-name: fadeInLeft;
        overflow:hidden;
    }
    .provide-list img{
        width:206px;
        height:234px;
        cursor:pointer;
        transition: all 0.3s ease-out;
    }
    .provide-list li:hover img{
        transform: scale(1.2);
    }
    .provide-list-box{
        width:90%;
        background:#ffffff;
        margin-left:30px;
        display:flex;
        
    }
    .provide-list-box .content-box{
        width:340px;
        padding:30px 20px 0 20px;
    }
    .img-box{
        width:206px;
        height:234px;
        overflow:hidden;
    }
    .provide-list-box div p{
        font-size:22px;
        margin-bottom:5px;
    }
    .provide-list-box div section{
        line-height:1.8;
        color: rgba(31,37,38,.75);
        margin-bottom:50px;
    }
    .provide-list-box div a{
        text-decoration:none;
        font-size:14px;
        color: rgb(1, 144, 65);
    }

    .clearfix:after {
        content: " ";
        display: block;
        clear: both;
        height: 0;
    }
    .clearfix {
      zoom: 1;
    }
</style>